<!DOCTYPE html>
<html lang="en">
<head>
    <title>轮播图</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        #banner>ul {
            list-style: none;
        }
        #banner>ul>li {
            width: 100%;
            height: 484px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="banner">
        <ul>
            <li><img src="img/banner1.jpg"></li>
            <li><img src="img/banner2.jpg"></li>
            <li><img src="img/banner3.jpg"></li>
            <li><img src="img/banner4.jpg"></li>
            <li><img src="img/banner5.jpg"></li>
            <li><img src="img/banner6.jpg"></li>
        </ul>
    </div>
    <script>
        var $j = 0;
        var $last = 0;
        var $timer = '';
        var $period = 2;
        var $iIndex = 1;

        var $imgs = $('div#banner ul li img');
        $imgs.eq($j).css('z-index', $iIndex).css('opacity', '1');
        $imgs.filter(':not(:eq(' + $j + '))').css('opacity', '0');

        function startRoll() {
            $last = $j;
            $j++;
            $iIndex++;

            if($j >= $imgs.length) {
                $j = 0;
            }
            $imgs.eq($j).css('z-Index', $iIndex).animate({opacity:1}, 1000, 'linear', function() {
                $imgs.eq($last).css('opacity', '0');
            });

            $timer = setTimeout('startRoll()', 2000);
            console.log($last + '-' + $j);
        }

        $timer = setTimeout('startRoll()', 2000);

    </script>
</body>
</html>